import React, { memo, useEffect, useState } from 'react';
import type { ReactNode, FC } from 'react';
import { fetchBanner } from './store/recommend';
import { useAppDispatch } from '@/store';
import Swiper from './c-cpns/banner/index';
interface IProps {
    children?: ReactNode;
}
export interface IBanner {
    imageUrl: string;
    targetId: number;
    adid: any;
    targetType: number;
    titleColor: string;
    typeTitle: string;
    url: string;
    exclusive: boolean;
    monitorImpress: any;
    monitorClick: any;
    monitorType: any;
    monitorImpressList: any;
    monitorClickList: any;
    monitorBlackList: any;
    extMonitor: any;
    extMonitorInfo: any;
    adSource: any;
    adLocation: any;
    adDispatchJson: any;
    encodeId: string;
    program: any;
    event: any;
    video: any;
    song: any;
    scm: string;
    bannerBizType: string;
}

const template: FC<IProps> = () => {
    const dispatch = useAppDispatch();
    const [banner, setBanner] = useState<IBanner[]>([]);
    useEffect(() => {
        dispatch(fetchBanner());
    }, []);
    return (
        <div>
            <Swiper />
            {banner.map((item, index) => {
                return <img key={item.imageUrl} src={item.imageUrl} />;
            })}
        </div>
    );
};

export default memo(template);
